<template>
    <div class="delivery">
      <h3>配送记录</h3>
      <br>
      <br>
      <hr>
      <el-select clearable placeholder="男士" style="width:192px; margin-left: 20px;margin-bottom: 6px;" >
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />  
  </el-select>
  <div class="timer">
  <el-date-picker
          v-model="value2" 
          type="daterange"
          start-placeholder="2022-11-1"
          end-placeholder="2022-11-8"
          :default-value="[new Date(2010, 9, 1), new Date(2010, 10, 1)]"/></div>
    <!-- 订单号 -->
    <el-input v-model="input" placeholder="订单号" style="width:192px;margin-left: 20px;margin-bottom: 6px;" />
      <el-button class="screen" type="info">筛选</el-button>
      <br>
      <hr>
      <el-table :data="tableData"  style="width: 100%;" >
        <el-table-column type="selection" width="55" />
      <el-table-column property="order" label="来自订单" width="150"  align="center" />
      <el-table-column property="commodity" label="商品" width="150" align="center"/>
      <el-table-column property="time" label="配送时间" width="150" align="center"/>
      <el-table-column property="add" label="配送地址" width="180" align="center"/>
      <el-table-column property="state" label="状态" width="150" align="center"/>
      <el-table-column property="note" label="备注" width="300" align="center" magin-left="5">
    </el-table-column>
    </el-table>
    <el-pagination  class="paging" background layout="prev, pager, next"  :total="total" :default-page-size="pageSize"
                hide-on-single-page @current-change="pageChange" />

      </div>
  </template>
  
  <script  lang="ts">
import { getDelivery } from '@/api/user'

  export default {
    name: 'delivery',
    
    data(){
      return{
        value2:[new Date, new Date],
        input:'',
        tableData:[
          {
            check:false,
            order:2017000001,
            commodity:'男士餐',
            time:'2017-06-05  12:30',
            add:'肖家河大厦',
            state:'已配送',
          },
           {
            check:false,
            order:2017000001,
            commodity:'男士餐',
            time:'2017-06-05  12:30',
            add:'肖家河大厦',
            state:'已配送',
          },
        ],
        options:[
            {
                value:'男士',
                label:'男士',
            },
            {
                value:'女士',
                label:'女士',
            },
            {
                value:'工作餐',
                label:'工作餐',
            },
        ],
        total: 1,
      pageSize: 5,
      }
    },
    methods:{
      // 分页切换
      pageChange(page:any) {
      this.delivery(page)
        },
        // 请求配送记录数据
        async delivery(page=1) {
            const res = await getDelivery(page)
            console.log(res)
            //@ts-ignore
            const {list,total,pageSize} = res
             //@ts-ignore
            this.tableData = list
             //@ts-ignore
            this.total = total
             //@ts-ignore
            this.pageSize = pageSize
        }
    },
    created() {
       //@ts-ignore
        this.delivery()
    },
  }
  
  </script>
  
  <style scoped lang="less">
  .delivery h3 {
    font-size: 18px;
    font-weight: 600;
    float: left;
    padding-left: 20px;
  }
    .screen{
      margin-left: 50px;
      border-radius: 0;
    }
    .user u {
      margin-left: 10px;
    }
    .button {
      margin-left: 10px;
    }
    .timer {
        display: inline-block;
        margin-left: 10px;
    }
    .paging {
    margin-top: 50px;
    margin-left: 450px;
    
  }
  </style>
  